<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />


</head>
<body>


	<link rel="STYLESHEET" type="text/css"
		href="dhtmlxtree/dhtmlxtree.css">
		<script src="dhtmlxtree/dhtmlxcommon.js"></script>
		<script src="dhtmlxtree/dhtmlxtree.js"></script>
		<!-- 如果是使用json格式就必须引入 dhtmlxtree_json.js文件-->
		<script src="dhtmlxtree/dhtmlxtree_json.js"></script>

		<div id="treeboxbox_tree"
			style="width: 250px; height: 218px; background-color: #f5f5f5; border: 1px solid Silver;"></div>


<button onclick="getAllChecked()">获取全部选中的节点</button><br><br>

<button onclick="getSelectedNode()">获取选中的节点</button><br><br>

<button onclick="getSelectedChecked()">选中的节点设为已选</button><br><br>

<button onclick="getSelectedUNChecked()">选中的节点设为不选中</button><br><br>

		<script>
		//获取选中节点的值
		function getSelectedNode(){
			alert(tree.getSelectedItemId());
		}
		//将鼠标点中的节点在checkbox选中
		function getSelectedChecked(){
			tree.setCheck(tree.getSelectedItemId(),true);
		}
		//将鼠标点中的节点在checkbox不选中
		function getSelectedUNChecked(){
			tree.setCheck(tree.getSelectedItemId(),false);
		}
		//获取所有checkbox中全部选中的节点
		function getAllChecked(){
			
			alert(tree.getAllChecked());
		}
		
		function clickFunc(id){
			alert("click Item " + tree.getItemText(id) + " was selected");
		}
		
		function dbclickFunc(id){
			//根据id获取内容的方法是 tree.getItemText(id)
			alert("dbclick Item " + tree.getItemText(id) + " was selected");
		}
		
		function checkedFunc(id){
			alert("checked Item " + tree.getItemText(id) + " was selected");
		}
		
		
		
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);

			tree.setSkin('dhx_skyblue');
			tree.setImagePath("dhtmlxtree/common/images/");
			tree.enableDragAndDrop(0);
			tree.enableTreeLines(false);
			tree.setImageArrays("plus","","","","plus.gif");
			tree.setImageArrays("minus","","","","minus.gif");
			tree.setStdImages("book.gif","books_open.gif","books_close.gif");	
			
			//是否使用checkbox
			tree.enableCheckBoxes(1);
			
			//1、选中子节点，是否让其parent节点也选中，2、选中父节点，子节点全部选中
			tree.enableThreeStateCheckboxes(true);
			
			//自定义事件
			tree.setOnCheckHandler(checkedFunc);//多选框是否被选中
			//tree.setOnClickHandler(clickFunc);//单机事件
			tree.setOnDblClickHandler(dbclickFunc);//双击事件
			
			//打开有子节点的父节点出现的方法
			tree.attachEvent("onOpenEnd", function(nodeId, event) {
			    alert("An id of open item is " + nodeId);
			});
			
			var json = {
				    id: 0,
				    item:[
				    	{
				    		id:"X1",
				    		text:"一",
				    		item:[
				    			{
				    				id:"X11",
					    			text:"一一"
				    			},
				    			{
				    				id:"X12",
					    			text:"一二"
				    			}
				    		]
				    	},
				    	{
				    		id:"X2",
				    		text:"二",
				    		item:[
				    			{
				    				id:"X21",
					    			text:"二一"
				    			},
				    			{
				    				id:"X22",
					    			text:"二二"
				    			}
				    		]
				    	}
				    ]
				};
			
			var jsondata = {id:0, item:[{id:1,text:"first"},{id:2, text:"middle", item:[{id:"21", text:"child"}]},{id:3,text:"last"}]};
			//tree.loadJSONObject(jsondata);
			tree.loadJSONObject(json,function(){
				
				//alert(1);
			});
			
			//动态添加的节点也能绑定之前设定的方法
			tree.insertNewChild(0,"hb","hb");
			
	</script>
</body>
</html>